<template>
  <div>
    <h3 class="title">App组件</h3>
    <hr />
    <!-- 
      vue中父组件中的数据可以通过自定义属性的方式向子组件传递
     -->
    <child :attrtitle="title" :age="age" :setAge="setAge" @onSetAge="setAge" />
    <child />
    <child :attrtitle="'100'" />
  </div>
</template>

<script>
// 引入对应的组件
// @在vue工程中,给进行了webpack别名配置,它指向 src目录
// import child from '@/components/child.vue'
import child from './components/child.vue'
export default {
  components: {
    child
  },
  data() {
    return {
      title: '我是一个显示的内容',
      age: 100
    }
  },
  methods: {
    setAge(n = 1) {
      this.age += n
    }
  }
}
</script>

<style lang="scss" scoped></style>
